<html>
    <head>
        <meta charset="utf-8">
        <link href="css/login.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <iframe frameborder="0" marginwidth="0" marginheight="0" width="100%" height="80px" scrolling="no" src="header.php"></iframe>

        <div class="main">
            <div>
                <label>email</label>
                <input id="email" type="text"/>
            </div>
            <div>
                <label>password</label>
                <input id="password" type="password"/>
            </div>
            <div>
                <button onclick="login()" id="login">login</button>
                <a href="regPage.php">to register</a>
            </div>
        </div>
    <script src="js/jquery.js" type="application/javascript"></script>
    <script type="application/javascript">

        function isEmail(str){
            var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
            return reg.test(str);
        }

        function login(){
            let email = $("#email").val();
            let password = $("#password").val();

            if (!isEmail(email)) {
                alert("email invalid");
                return;
            }

            $.ajax({
                url: "http://localhost:8080/cuisine/server/controller/login.php",
                data: {
                    "email": email,
                    "password": password
                },
                type: "get",
                success(data){
                    console.log(data);
                    data = JSON.parse(data);
                    if (!data.code) {
                        alert(data);
                        return;
                    }
                    localStorage.setItem("userName",data.result.user_name);
                    window.location.href="index.php";
                },
                error(e) {
                    console.log(e);
                }
            });
        }
    </script>
    </body>
</html>